<template>
  <div class="app-container org-tab-info" style="margin: 30px 0px;">
    <el-row :gutter="20">
      <!--部门数据-->
      <el-col :span="5" :xs="24">
        <el-tabs v-if="false" v-model="activeName" style="width: 100%;">
          <el-tab-pane label="实验室仪器" name="first">
          </el-tab-pane>
          <el-tab-pane label="实验室管控品" name="second">
          </el-tab-pane>
        </el-tabs>
        <div class="head-container el_tree_ground">
          <el-input v-model="deptName" placeholder="请输入部门名称" clearable size="small" prefix-icon="el-icon-search"
            style="margin-bottom: 20px" />
        </div>
        <div class="head-container" style="width: 100%;height:600px;overflow:hidden;">
          <el-tree
              style="width: 106%; height:100%;overflow:auto;overflow-x:hidden;"
               node-key="id"
              :default-expanded-keys="[1]"
              :data="deptOptions"
              :props="defaultProps"
              :expand-on-click-node="false"
              :filter-node-method="filterNode"
               ref="tree"
              @node-click="handleNodeClick">
            <!--过长处理，鼠标悬浮文字弹框显示全部内容-->
            <span slot-scope="{ node }">
              <el-tooltip class="item" effect="light" :content="node.label" placement="top-start"
                v-if="node.label.length>12">
                <span> {{ node.label | ellipsis(12) }} </span>
              </el-tooltip>
              <span v-if="node.label.length<=12">{{node.label}}</span>
            </span>
          </el-tree>
        </div>
      </el-col>
      <!--其他数据-->
      <el-col :span="19" :xs="24" >
        <Instrumentation v-if="activeName=='first'" :orgId="deptData.id"></Instrumentation>
        <el-tabs v-model="secondTab" v-if="activeName=='second'">
          <el-tab-pane label="常用备品" name="first" v-if=" false && isPermit('labbase:product:query')">
            <Product v-if="secondTab=='first'" :orgId="deptData.id" />
          </el-tab-pane>
          <el-tab-pane label="气瓶" name="second" v-if="isPermit('labbase:cylinder:query')">
            <Cylinder v-if="secondTab=='second'" :deptData="deptData" />
          </el-tab-pane>
          <el-tab-pane label="在用化学品" name="third" v-if="isPermit('system:casInventory:query')">
            <ProductCas :orgId="deptData.id" v-if="secondTab=='third'"/>
          </el-tab-pane>
          <el-tab-pane label="历史化学品" name="fourth" v-if="isPermit('system:casInventory:query')">
            <ProductCas :orgId="deptData.id" isHis v-if="secondTab=='fourth'"/>
          </el-tab-pane>
        </el-tabs>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  import {
    treeselect,getTreeLabel,
  } from "@/api/labdata/orgnization";
  import Treeselect from "@riophae/vue-treeselect";
  import "@riophae/vue-treeselect/dist/vue-treeselect.css";
  import Instrumentation from "@/views/labbase/instrumentation/index";
  import Product from "@/views/labbase/product/index";
  import Cylinder from "@/views/labbase/cylinder/index";
  import ProductCas from "@/views/labbase/product_cas";
  export default {
    name: "Products",
    components: {
      Instrumentation,
      Product,
      Cylinder,
      ProductCas
    },
    data() {
      return {
        activeName: 'first',
        secondTab: 'second',
        // 部门树选项
        deptOptions: [],
        // 部门名称
        deptName: undefined,
        deptData: {
          id: 1,
          label: '南京邮电大学',
          orgFunctionOpt:1,
        },
        defaultProps: {
          children: "children",
          label: "label"
        },
        // 表单参数
        form: {},
        // 表单校验
        rules: {

        },
      };
    },
    watch: {
      // 根据名称筛选部门树
      deptName(val) {
        this.$refs.tree.filter(val);
      }
    },
    created() {
      this.getTreeselect();
    },
    methods: {
      // 筛选节点
      filterNode(value, data) {
        if (!value) return true;
        return data.label.indexOf(value) !== -1;
      },
      // 节点单击事件
      handleNodeClick(data) {
        this.deptData = data;
      },
      /** 查询部门下拉树结构 */
      getTreeselect() {
        treeselect().then(response => {
          this.deptOptions = response.data;
        });
      },
      getTreeNodeLabel(deptId){
        return getTreeLabel(this.deptOptions, deptId);
      },
      isPermit(permitKey){
        if(this.$store.state.user.name=='admin'){
          return true;
        }
        let  permissions = this.$store.getters.permissions;
        return permissions.includes(permitKey);
      },
    }

  };
</script>
